<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 20px" @click="addSpuInfo">添加Spu</el-button>
    <el-table :data="spuList" height="250" border style="width: 100%">
      <el-table-column label="序号" type="index" width="80" align="center"> </el-table-column>
      <el-table-column label="Spu名称" align="center" prop="spuName"> </el-table-column>
      <el-table-column label="Spu描述" align="center" prop="description"> </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-tooltip content="添加Sku" placement="top">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSkuInfo(row)" />
          </el-tooltip>
          <el-tooltip content="修改Spu" placement="top">
            <el-button type="warning" icon="el-icon-edit" size="mini" @click="editSpuInfo(row)" />
          </el-tooltip>
          <el-tooltip content="查看Spu" placement="top" style="margin-right: 10px">
            <el-button type="info" icon="el-icon-info" size="mini" />
          </el-tooltip>
          <el-popconfirm confirm-button-text="好的" cancel-button-text="不用了" icon="el-icon-info" icon-color="red" title="这是一段内容确定删除吗？" @onConfirm="deleSpuInfo(row)">
            <el-tooltip slot="reference" content="删除Spu" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="currentPage" :page-sizes="[3, 5, 10]" :page-size="limit" layout="prev, pager, next, jumper, ->, sizes, total " @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import { reqGetSpuList, reqDeleteSpu } from '@/api/product/spu'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'SaveList',
  data() {
    return {
      currentPage: 1,
      limit: 3,
      spuList: [],
      total: 0
    }
  },
  computed: {
    ...mapState('category', ['category3Id'])
  },
  watch: {
    category3Id: {
      immediate: true,
      handler() {
        this.getSpuList()
      }
    }
  },
  methods: {
    ...mapMutations('spu', ['SET_SPU_INFO']),
    //封装一个获取当前页面spu列表方法
    async getSpuList() {
      const { currentPage: page, limit, category3Id } = this
      const result = await reqGetSpuList(page, limit, category3Id)
      if (result.code === 200) {
        this.spuList = result.data.records
        this.total = result.data.total
      }
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.limi = val
      this.getSpuList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getSpuList()
    },
    //修改spu
    editSpuInfo(row) {
      //跳转页面
      this.$emit('update:visible', 2)
      //传递值
      this.$emit('setSpuInfo', {
        ...row,
        spuImageList: [], // SPU图片
        spuSaleAttrList: [] // 基本销售属性,属性列表
      })
    },
    async deleSpuInfo(row) {
      const result = await reqDeleteSpu(row.id)
      if (result.code === 200) {
        this.$message.success('删除成功！')
        this.getSpuList() //重新刷新页面
      } else {
        this.$message.error('删除失败！')
      }
    },
    //添加sku
    addSkuInfo(row) {
      this.$emit('update:visible', 3)
      this.SET_SPU_INFO(row)
    },
    addSpuInfo() {
      this.$emit('update:visible', 2)
      this.$enit('setSpuInfo', {
        spuImageList: [],
        spuSaleAttrList: []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>